<template>
  <div class='container'>
    <button class="suf" @click="year_suf"></button>
    <div class='box' ref="box">
      <div class='mask'>
        <div :style="pointerStyle"></div>
        <div :style="pointerStyle"></div>
      </div>
      <div class='scale' ref="scale">
        <div :style="spaceLeft"></div>
        <div v-for="v in initData.scaleList" :key="v"
          :style="{ padding: '0 5px', borderBottom: '1px solid black', backgroundColor: calculateBG(v) }">
          <span style="z-index:1;" v-if="(v) % 5 == 0">{{ v }}</span>
          <span style="z-index:1;" v-else></span>
          <div v-if="(v) % 5 == 0" :style="scale2"></div>
          <div v-else :style="scale1"></div>
        </div>
        <div :style="spaceRight"></div>
      </div>
      <div class='pointer'></div>
    </div>
    <button class="pre" @click="year_pre"></button>
    <div class="dynastyScroll">
      <div style="margin-left: 10px;display: flex" v-bind:key="i" v-for="(dy, i) in initData.dynastyList"
        @mouseover="mouseOver($event, i)" @mouseleave="mouseLeave(i)">
        <div :style="dy.style"></div>
        <span style="width: 80px;height:20px;font-size:15px;text-align:left;margin-left: 5px">{{ dy.dynasty }}</span>
        <DynastyTable :id="i" :dynasty="dy" :style="i==showId?showTbStyle:hiddenTbStyle"/>
      </div>
    </div>
  </div>
</template>

<script>
import DynastyTable from "@/components/common/DynastyTable.vue";

export default {
  name: "RuleOfYear",
  components: {
    DynastyTable
  },
  emits: ["setQueryKey"],
  data() {
    return {
      initData: {
        dynastyList: [//朝代列表
          {
            dynasty: "三皇五帝",
            start: -3000,
            end: -2146,
            style: {
              backgroundColor: "darkorange",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "三皇五帝",
                start: "-",
                end: "约公元前2146",
                children: []
              }
            ]
          },
          {
            dynasty: "夏",
            start: -2146,
            end: -1675,
            style: {
              backgroundColor: "blueviolet",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "夏",
              start: "约公元前2146",
              end: "约公元前1675",
              children: []
            }]
          },
          {
            dynasty: "商",
            start: -1675,
            end: -1029,
            style: {
              backgroundColor: "#98AFC7",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "商",
              start: "约公元前1675",
              end: "约公元前1029",
              children: []
            }]
          },
          {
            dynasty: "周",
            start: -1029,
            end: -221,
            style: {
              backgroundColor: "brown",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "周",
                start: "约公元前1046年",
                end: "约公元前256年",
                children: [{
                  dynasty: "西周",
                  start: "约公元前1029",
                  end: "公元前771",
                  children: []
                },
                {
                  dynasty: "东周",
                  start: "公元前770",
                  end: "公元前256",
                  children: [
                    {
                      dynasty: "春秋",
                      start: "公元前770",
                      end: "公元前476",
                      children: []
                    },
                    {
                      dynasty: "战国",
                      start: "公元前475",
                      end: "公元前221",
                      children: []
                    }
                  ]
                }]
              }
            ]
          },
          {
            dynasty: "秦",
            start: -221,
            end: -207,
            style: {
              backgroundColor: "#625D5D",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "秦",
              start: "公元前221",
              end: "公元前207",
              children: []
            }]
          },
          {
            dynasty: "汉",
            start: -207,
            end: 220,
            style: {
              backgroundColor: "#FFDB58",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "秦",
                start: "公元前221",
                end: "公元前207",
                children: [{
                  dynasty: "西汉",
                  start: "公元前206",
                  end: "公元8",
                  children: []
                },
                {
                  dynasty: "新朝",
                  start: "公元8",
                  end: "公元23",
                  children: []
                },
                {
                  dynasty: "东汉",
                  start: "公元25",
                  end: "公元220",
                  children: []
                }]
              }
            ]
          },
          {
            dynasty: "三国",
            start: 220,
            end: 265,
            style: {
              backgroundColor: "#54C571",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "三国",
                start: "公元220",
                end: "公元280",
                children: [{
                  dynasty: "曹魏",
                  start: "公元220",
                  end: "公元265",
                  children: []
                },
                {
                  dynasty: "蜀汉",
                  start: "公元221",
                  end: "公元263",
                  children: []
                },
                {
                  dynasty: "孙吴",
                  start: "公元222",
                  end: "公元280",
                  children: []
                }]
              }
            ]
          },
          {
            dynasty: "晋",
            start: 265,
            end: 304,
            style: {
              backgroundColor: "#9AFEFF",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "晋",
                start: "公元266",
                end: "公元420",
                children: [{
                  dynasty: "西晋",
                  start: "公元265",
                  end: "公元316",
                  children: []
                },
                {
                  dynasty: "东晋",
                  start: "公元317",
                  end: "公元420",
                  children: []
                }]
              }
            ]
          },
          {
            dynasty: "十六国",
            start: 304,
            end: 439,
            style: {
              backgroundColor: "#2B65EC",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "十六国",
                start: "公元304",
                end: "公元439",
                children: [{
                  dynasty: "前赵",
                  start: "公元304",
                  end: "公元329",
                  children: []
                },
                {
                  dynasty: "成汉",
                  start: "公元306",
                  end: "公元347",
                  children: []
                },
                {
                  dynasty: "前凉",
                  start: "公元314",
                  end: "公元363",
                  children: []
                },
                {
                  dynasty: "后赵",
                  start: "公元319",
                  end: "公元351",
                  children: []
                },
                {
                  dynasty: "前燕",
                  start: "公元337",
                  end: "公元370",
                  children: []
                },
                {
                  dynasty: "前秦",
                  start: "公元351",
                  end: "公元394",
                  children: []
                },
                {
                  dynasty: "后秦",
                  start: "公元384",
                  end: "公元417",
                  children: []
                },
                {
                  dynasty: "后燕",
                  start: "公元384",
                  end: "公元407",
                  children: []
                },
                {
                  dynasty: "西秦",
                  start: "公元385",
                  end: "公元431",
                  children: []
                },
                {
                  dynasty: "后凉",
                  start: "公元386",
                  end: "公元403",
                  children: []
                },
                {
                  dynasty: "南凉",
                  start: "公元397",
                  end: "公元414",
                  children: []
                },
                {
                  dynasty: "南燕",
                  start: "公元398",
                  end: "公元410",
                  children: []
                },
                {
                  dynasty: "西凉",
                  start: "公元407",
                  end: "公元421",
                  children: []
                },
                {
                  dynasty: "胡夏",
                  start: "公元407",
                  end: "公元431",
                  children: []
                },
                {
                  dynasty: "北燕",
                  start: "公元407",
                  end: "公元436",
                  children: []
                },
                {
                  dynasty: "北凉",
                  start: "公元397",
                  end: "公元439",
                  children: []
                },
                {
                  dynasty: "冉魏",
                  start: "公元350",
                  end: "公元352",
                  children: []
                },
                {
                  dynasty: "西燕",
                  start: "公元384",
                  end: "公元394",
                  children: []
                },
                {
                  dynasty: "西蜀",
                  start: "公元405",
                  end: "公元413",
                  children: []
                }]
              }
            ]
          },
          {
            dynasty: "南北朝",
            start: 420,
            end: 589,
            style: {
              backgroundColor: "#254117",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "南北朝",
                start: "公元420",
                end: "公元589",
                children: [
                  {
                    dynasty: "南朝",
                    start: "公元420",
                    end: "公元589",
                    children: [
                      {
                        dynasty: "宋",
                        start: "公元420",
                        end: "公元479",
                        children: [],
                      },
                      {
                        dynasty: "齐",
                        start: "公元479",
                        end: "公元502",
                        children: [],
                      },
                      {
                        dynasty: "梁",
                        start: "公元502",
                        end: "公元557",
                        children: [],
                      },
                      {
                        dynasty: "陈",
                        start: "公元557",
                        end: "公元589",
                        children: [],
                      }
                    ],
                  },
                  {
                    dynasty: "北朝",
                    start: "公元386",
                    end: "公元581",
                    children: [
                      {
                        dynasty: "北魏",
                        start: "公元386",
                        end: "公元534",
                        children: [],
                      },
                      {
                        dynasty: "东魏",
                        start: "公元534",
                        end: "公元550",
                        children: [],
                      },
                      {
                        dynasty: "西魏",
                        start: "公元535",
                        end: "公元556",
                        children: [],
                      },
                      {
                        dynasty: "北齐",
                        start: "公元550",
                        end: "公元577",
                        children: [],
                      },
                      {
                        dynasty: "北周",
                        start: "公元557",
                        end: "公元581",
                        children: [],
                      }
                    ],
                  }
                ]
              }
            ]
          },
          {
            dynasty: "隋",
            start: 589,
            end: 618,
            style: {
              backgroundColor: "#FAEBD7",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "隋",
              start: "公元581",
              end: "公元618",
              children: []
            }]
          },
          {
            dynasty: "唐",
            start: 618,
            end: 907,
            style: {
              backgroundColor: "#FDD017",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "唐",
                start: "公元618",
                end: "公元907",
                color: "",
                children: []
              }
            ]
          },
          {
            dynasty: "五代十国",
            start: 907,
            end: 979,
            style: {
              backgroundColor: "#786D5F",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "五代十国",
                start: "公元907",
                end: "公元979",
                children: [
                  {
                    dynasty: "后梁",
                    start: "公元907",
                    end: "公元923",
                    children: []
                  },
                  {
                    dynasty: "后唐",
                    start: "公元923",
                    end: "公元936",
                    children: []
                  },
                  {
                    dynasty: "后晋",
                    start: "公元936",
                    end: "公元947",
                    children: []
                  },
                  {
                    dynasty: "后汉",
                    start: "公元947",
                    end: "公元950",
                    children: []
                  },
                  {
                    dynasty: "后周",
                    start: "公元951",
                    end: "公元960",
                    children: []
                  },
                  {
                    dynasty: "前蜀",
                    start: "公元891",
                    end: "公元925",
                    children: []
                  },
                  {
                    dynasty: "后蜀",
                    start: "公元925",
                    end: "公元965",
                    children: []
                  },
                  {
                    dynasty: "杨吴",
                    start: "公元892",
                    end: "公元937",
                    children: []
                  },
                  {
                    dynasty: "南唐",
                    start: "公元937",
                    end: "公元975",
                    children: []
                  },
                  {
                    dynasty: "吴越",
                    start: "公元893",
                    end: "公元978",
                    children: []
                  },
                  {
                    dynasty: "闽国",
                    start: "公元893",
                    end: "公元945",
                    children: []
                  },
                  {
                    dynasty: "马楚",
                    start: "公元896",
                    end: "公元951",
                    children: []
                  }, {
                    dynasty: "南汉",
                    start: "公元905",
                    end: "公元971",
                    children: []
                  }, {
                    dynasty: "南平",
                    start: "公元907",
                    end: "公元963",
                    children: []
                  }, {
                    dynasty: "北汉",
                    start: "公元951",
                    end: "公元979",
                    children: []
                  }
                ]
              }
            ]
          },
          {
            dynasty: "宋",
            start: 979,
            end: 1271,
            style: {
              backgroundColor: "#C58917",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "宋",
                start: "公元960",
                end: "公元1279",
                children: [
                  {
                    dynasty: "北宋",
                    start: "公元960",
                    end: "公元1127",
                    children: []
                  },
                  {
                    dynasty: "南宋",
                    start: "公元1127",
                    end: "公元1279",
                    children: []
                  },
                  {
                    dynasty: "辽国",
                    start: "公元907",
                    end: "公元1125",
                    children: []
                  },
                  {
                    dynasty: "大理",
                    start: "公元937",
                    end: "公元1254",
                    children: []
                  },
                  {
                    dynasty: "西夏",
                    start: "公元1032",
                    end: "公元1227",
                    children: []
                  },
                  {
                    dynasty: "金",
                    start: "公元1115",
                    end: "公元1234",
                    children: []
                  }
                ]
              }
            ]
          },
          {
            dynasty: "元",
            start: 1271,
            end: 1368,
            style: {
              backgroundColor: "#C11B17",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "元",
                start: "公元1271",
                end: "公元1368",
                children: []
              }
            ]
          },
          {
            dynasty: "明",
            start: 1368,
            end: 1644,
            style: {
              backgroundColor: "#B87333",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "明",
              start: "公元1368",
              end: "公元1644",
              children: []
            }]
          },
          {
            dynasty: "清",
            start: 1644,
            end: 1912,
            style: {
              backgroundColor: "#800517",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "清",
              start: "公元1636",
              end: "公元1912",
              children: []
            }]
          },
          {
            dynasty: "中华民国",
            start: 1912,
            end: 1949,
            style: {
              backgroundColor: "#C48793",
              width: "20px",
              height: "20px"
            },
            children: [{
              dynasty: "中华民国",
              start: "公元1912",
              end: "公元1949",
              children: []
            }]
          },
          {
            dynasty: "中华人民共和国",
            start: 1949,
            end: 3000,
            style: {
              backgroundColor: "red",
              width: "20px",
              height: "20px"
            },
            children: [
              {
                dynasty: "中华人民共和国",
                start: "公元1949",
                end: "-",
                children: []
              }
            ]
          }
        ],
        scaleList: []
      },
      minScale: -3000,//最小刻度
      maxScale: 3000,//最大刻度
      dif: 901,//一次渲染刻度
      space: 5,//刻度间隔
      spaceLeft: {
        paddingLeft: '289.5px',//左填充
        borderBottom: '1px solid black',//下边框线颜色
      },
      spaceRight: {
        paddingRight: '289.5px',//右填充
        borderBottom: '1px solid black',//下边框线颜色
      },
      scale1: {//短刻度
        background: 'black',//短刻度颜色
        height: '5px',//短刻度长度
      },
      scale2: {//长刻度
        background: 'black',//长刻度颜色
        height: '15px',//长刻度长度
      },
      pointerStyle: {
        //background: 'red',//背景颜色
        width: '290px'
      },
      showId:-1,
      hiddenTbStyle:{
        display:"none",
      },
      showTbStyle:{
        left:"",
        top:"",
        display:"none",
      },
    }
  },
  computed: {},
  methods: {
    //计算刻度
    calculateScale(y) {
      let list = [];
      for (let i = 1; i <= this.dif; i++) {
        let s = i - Math.round(this.dif / 2) + y;
        list.push(s);
      }
      this.initData.scaleList = list;
    },
    //向后滚动，添加过去时间，删除未来时间
    scroll_suf(d) {
      let y = this.initData.scaleList[0];
      if (y <= this.minScale) {
        return 0;
      }
      let list = [];
      for (let i = 0; i < this.initData.scaleList.length; i++) {
        list.push(this.initData.scaleList[i]);
      }
      for (let i = 1; i <= d; i++) {
        let s = y - i;
        if (s < this.minScale) {
          this.initData.scaleList = list;
          return i - 1;
        }
        list.unshift(s);
        list.pop();
      }
      this.initData.scaleList = list;
      return d;
    },
    //向前滚动，添加未来时间，删除过去时间
    scroll_pre(d) {
      let y = this.initData.scaleList[this.dif - 1];
      if (y >= this.maxScale) {
        return 0;
      }
      let list = [];
      for (let i = 0; i < this.initData.scaleList.length; i++) {
        list.push(this.initData.scaleList[i]);
      }
      for (let i = 1; i <= d; i++) {
        let s = y + i;
        if (s > this.maxScale) {
          this.initData.scaleList = list;
          return i - 1;
        }
        list.push(s);
        list.shift();
      }
      this.initData.scaleList = list;
      return d;
    },

    isScroll() {
      let data = this
      let scrollPre = this.scroll_pre;
      let scrollSuf = this.scroll_suf;
      let sp = this.space;
      let initOffSet = Math.round(this.dif / 2) - 1;
      let d = this.dif;
      let minScale = this.minScale;
      let maxScale = this.maxScale;

      this.$refs.box.onscroll = function (event) {
        event.preventDefault();
        let t1 = this.scrollLeft - initOffSet * (sp * 2 + 1);
        let offset = Math.round(t1 / (sp * 2 + 1));

        //向后滚
        let y = data.initData.scaleList[0];
        if (y > minScale && t1 < 0 && -t1 > 100 * (sp * 2 + 1)) {
          let n = scrollSuf(-offset);

          let year = data.initData.scaleList[initOffSet + offset + n];
          data.$emit("setQueryKey", year.toString());

          this.scrollLeft = (initOffSet + offset + n) * (sp * 2 + 1);
          return;
        }
        //向前滚
        y = data.initData.scaleList[d - 1];
        if (y < maxScale && t1 > 0 && t1 > 100 * (sp * 2 + 1)) {
          let n = scrollPre(offset);

          let year = data.initData.scaleList[initOffSet + offset - n];
          data.$emit("setQueryKey", year.toString());

          this.scrollLeft = (initOffSet + offset - n) * (sp * 2 + 1);
          return;
        }
        let year = data.initData.scaleList[initOffSet + offset];
        data.$emit("setQueryKey", year.toString());
        this.scrollLeft = (initOffSet + offset) * (sp * 2 + 1);
      };

      let year = this.initData.scaleList[initOffSet];
      this.$emit("setQueryKey", year.toString());

      this.$refs.box.scrollLeft = initOffSet * (sp * 2 + 1);
    },

    //计算年尺位置
    calculateRule(y) {
      if (isNaN(y)) {
        y = 0;
      }
      let initOffSet = Math.round(this.dif / 2) - 1;
      if (y <= this.minScale) {
        y = this.minScale + initOffSet;
      }
      if (y >= this.maxScale) {
        y = this.maxScale - initOffSet;
      }
      //初始化刻度
      this.calculateScale(y);
      let year = this.initData.scaleList[initOffSet];
      this.$emit("setQueryKey", year.toString());
      //延迟到渲染完成后执行
      this.$nextTick(() => {
        this.$refs.box.scrollLeft = initOffSet * (this.space * 2 + 1);
      });
    },

    // 年份后退
    year_suf() {
      let initOffSet = Math.round(this.dif / 2) - 1;
      let t1 = this.$refs.box.scrollLeft - initOffSet * (this.space * 2 + 1);
      let offset = Math.round(t1 / (this.space * 2 + 1));
      this.$refs.box.scrollLeft = (initOffSet + offset - 1) * (this.space * 2 + 1);
    },
    // 年份前进
    year_pre() {
      let initOffSet = Math.round(this.dif / 2) - 1;
      let t1 = this.$refs.box.scrollLeft - initOffSet * (this.space * 2 + 1);
      let offset = Math.round(t1 / (this.space * 2 + 1));
      this.$refs.box.scrollLeft = (initOffSet + offset + 1) * (this.space * 2 + 1);
    },

    //计算背景颜色
    calculateBG(year) {
      for (let i in this.initData.dynastyList) {
        if (this.initData.dynastyList[i].start <= year && year <= this.initData.dynastyList[i].end) {
          return this.initData.dynastyList[i].style.backgroundColor;
        }
      }
      return ""
    },

    //鼠标悬停
    mouseOver(event, i) {
      let x = event.clientX;
      let y = event.clientX;
      this.showId=i;
      this.showTbStyle.left=x + 'px';
      this.showTbStyle.top=y + 'px';
      this.showTbStyle.display='block';
    },

    //鼠标移出
    mouseLeave(i) {
      this.showId=-1;
    }
  },
  created() {
    this.calculateRule(0);
  },
  mounted() {
    this.isScroll();
  }
}
</script>

<style scoped>
.container {
  width: 600px;
  height: 90px;
  position: relative;
}

.suf {
  position: absolute;
  left: -200px;
  width: 100px;
  height: 100px;
  background-color: #A52A2A;
  clip-path: polygon(100% 0,100% 100%,0 50%,100% 0);
  /*过度动画效果时间*/
  transition: all 0.3s;
}

/*定义鼠标滑过事件*/
.suf:hover {
  /*放大*/
  transform: scale(1.2);
}

.pre {
  position: absolute;
  left: 700px;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: #A52A2A;
  clip-path: polygon(0 0,100% 50%,0 100%,0 0);
  /*过度动画效果时间*/
  transition: all 0.3s;
}

/*定义鼠标滑过事件*/
.pre:hover {
  /*放大*/
  transform: scale(1.2);
}

.box {
  width: 600px;
  box-sizing: border-box;
  height: 90px;
  padding-bottom: 10px;
  padding-top: 20px;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
}

.box::-webkit-scrollbar {
  display: none;
}

.scale {
  height: 100%;
  display: flex;
  position: relative;
  font-size: 12px;
}

.scale>div {
  width: 1px;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.scale>div>div {
  width: 1px;
  text-align: center;
  height: 10px;
}

.pointer {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid black;
  border-color: black transparent transparent transparent;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: space-between;
}

.mask>div {
  width: 100px;
  background: rgba(200, 200, 200, 0.2);
}

.dynastyScroll {
  position: absolute;
  width: 900px;
  left: -150px;
  top: 150px;
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
}
</style>